<!DOCTYPE html>
<html lang="en" style="min-width: 1366px">
<head>
    <meta charset="UTF-8">
    <title>Design</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="bootstrap-3.3.5/dist/css/bootstrap.min.css">
    <!-- 可选的Bootstrap主题文件（一般不用引入） -->
    <link rel="stylesheet" href="bootstrap-3.3.5/dist/css/bootstrap-theme.min.css">
    <!-- 自定义样式 -->
    <link rel="stylesheet" type="text/css" href="css/customer.css"/>
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="js/jquery-1.12.3.min.js"></script>
    <!-- echarts 文件 -->
    <script src="js/echarts.min.js"></script>
</head>
<body>
<div class="container-fir">
    <div class="nav-fir">
        <ul class="nav-fir-list">
            <li>
                <span class="glyphicon glyphicon-object-align-bottom" aria-hidden="true"></span>
                <span class="glyphicon-class">Report</span>
            </li>
            <li class="actived">
                <span class="glyphicon glyphicon-blackboard" aria-hidden="true"></span>
                <span class="glyphicon-class">Ws</span>
            </li>
            <li>
                <span class="glyphicon glyphicon-th-large" aria-hidden="true"></span>
                <span class="glyphicon-class">Widgets</span>
            </li>
        </ul>
    </div>
    <div class="container-sec">
        <span class="glyphicon glyphicon-menu-left back"></span>
        <div class="container-thi">
            <span class="title">Metro UI<i>Dash board</i></span>
            <div class="nav">
                <div class="nav-fir myrow">
                    <div>REALTIME REPORTS</div>
                    <div class="actived">STANDARD REPORTING</div>
                    <div>HOME</div>
                </div>
                <div class="nav-sec myrow">
                    <div><span class="glyphicon glyphicon-share" aria-hidden="true"></span> Export as PDF</div>
                    <div><span class="glyphicon glyphicon-object-align-bottom" aria-hidden="true"></span> Advanced Segments</div>
                    <div><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> Add to Dashboard</div>
                    <div><span class="glyphicon glyphicon-duplicate" aria-hidden="true"></span> Compare with other</div>
                    <div><span class="glyphicon glyphicon-th-large" aria-hidden="true"></span> Desktop widget</div>
                </div>
            </div>
            <div class="nav-tail">
                <div>User name</div>
                <div>User settings <span class="glyphicon glyphicon-user" aria-hidden="true"></span></div>
            </div>
            <div class="myrow perfomence">
                <h2>Perfomence</h2>
            </div>
            <div class="myrow perfomence-content">
                <div class="left-40">
                    <div class="myrow">
                        <div class="left-50 vis">
                            <h2>130.5%</h2>
                            <span>Returning visitors
                                &nbsp;<i class="glyphicon glyphicon-triangle-top" aria-hidden="true"></i>
                            </span>
                        </div>
                        <div class="right-48 goal">
                            <div id="imageContainer">image</div>
                            <span>Your goals
                                &nbsp;<i class="glyphicon glyphicon-triangle-top" aria-hidden="true"></i>
                            </span>
                        </div>
                    </div>
                    <div class="myrow real-time-report">
                        <div class="myrow">
                            <div class="left-50 real-time-report-title"><h2>Real time report</h2></div>
                            <div class="left-50 remark">
                                <span class="Dir"><i></i>&nbsp;Direct</span>
                                <span class="Soc"><i></i>&nbsp;Social</span>
                                <span class="Sea"><i></i>&nbsp;Search</span>
                            </div>
                        </div>
                        <div class="myrow index-progress-bar">
                            <div class="Dir_l">20</div>
                            <div class="Soc_l">50</div>
                            <div class="Sea_l">30</div>
                        </div>
                    </div>
                </div>
                <div class="left-60">
                    <div class="myrow">
                        <div class="right-33">
                            <div id="staticticsImage" class="pie-container"></div>
                            <span class="pie-title">Statistics (Visitors)</span>
                        </div>
                        <div class="right-33">
                            <div id="activeVisitors2" class="pie-container"></div>
                            <span class="pie-title">Active Visitors</span>
                        </div>
                        <div class="right-33">
                            <div id="activeVisitors" class="pie-container"></div>
                            <span class="pie-title">Active Visitors 2</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="myrow dataGrids">
                <h2>Data Grids</h2>
                <div class="dg-tools">
                    <form class="navbar-form navbar-left" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search">
                        </div>
                        <button type="submit" class="btn btn-default">
                            <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                        </button>
                    </form>
                </div>
            </div>
            <div class="myrow">
                <table class="table table-hover table-sm">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Username</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Username</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <th scope="row">1</th>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                    </tr>
                    <tr>
                        <th scope="row">2</th>
                        <td>Jacob</td>
                        <td>Thornton</td>
                        <td>@fat</td>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                    </tr>
                    <tr>
                        <th scope="row">3</th>
                        <td>Larry</td>
                        <td>the Bird</td>
                        <td>@twitter</td>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function() {
        var $imageContainer = $("#imageContainer");
        var $staticticsImage = $("#staticticsImage");
        var $activeVisitors = $("#activeVisitors");
        var $activeVisitors2 = $("#activeVisitors2");
        var imageContainer = echarts.init($imageContainer[0]);
        var staticticsImage = echarts.init($staticticsImage[0]);
        var activeVisitors = echarts.init($activeVisitors[0]);
        var activeVisitors2 = echarts.init($activeVisitors2[0]);
        var optionIC = {
            xAxis:  {
                type: 'category',
                boundaryGap: false,
                show:false,
                data: ['周一','周二','周三','周四','周五','周六','周日']
            },
            yAxis: {
                type: 'value',
                show:false,
                axisLabel: {
                    formatter: '{value} °C'
                }
            },
            color:['#fff'],
            textStyle: {
                color:'#6bbde8'
            },
            series: [
                {
                    name:'最低气温',
                    type:'line',
                    data:[1, -2, 2, 5, 3, 2, 0]
                }
            ]
        };
        imageContainer.setOption(optionIC);
        /*饼图*/
        var labelCom = {
            normal : {
                color: '#73ab3e',
                label : {
                    show : true,
                    position : 'center',
                    textStyle: {
                        color:'#fff',
                        fontSize:'40'
                    }
                }
            },
            emphasis: {
                color: '#73ab3e'
            }
        };
        var labelFail = {
            normal : {
                color: '#D2D1D1',
                label : {
                    show : false,
                    position : 'center'
                },
            },
            emphasis: {
                color: '#D2D1D1'
            }
        };
        /*饼图——1*/
        var optionSI = {
            color:['#73ab3e', '#D2D1D1'],
            series: [
                {
                    name:'访问来源',
                    type:'pie',
                    selectedMode: 'single',
                    animation: false,
                    radius: [0, '60%'],
                    color: ['#6bbde8'],
                    label: {
                        normal: {
                            show: false,
                            position: 'inner'
                        }
                    },
                    legendHoverLink: false,
                    hoverAnimation: false,
                    data:[
                        {value:100, name:'70%'}
                    ]
                },
                {
                    name:'访问来源',
                    type:'pie',
                    radius: ['75%', '90%'],
                    label: {
                        normal: {
                            show: false,
                            position: 'inner'
                        }
                    },
                    legendHoverLink : false,
                    data:[
                        {value:30, name:'未完成', itemStyle : labelFail},
                        {value:70, name:'70%', itemStyle : labelCom}
                    ]
                }
            ]
        };
        staticticsImage.setOption(optionSI);
        /*饼图——2*/
        var optionSV = {
            color:['#73ab3e', '#D2D1D1'],
            series: [
                {
                    name:'访问来源',
                    type:'pie',
                    selectedMode: 'single',
                    animation: false,
                    radius: [0, '60%'],
                    color: ['#6bbde8'],
                    label: {
                        normal: {
                            show: false,
                            position: 'inner'
                        }
                    },
                    legendHoverLink: false,
                    hoverAnimation: false,
                    data:[
                        {value:100, name:'60%'}
                    ]
                },
                {
                    name:'访问来源',
                    type:'pie',
                    radius: ['75%', '90%'],
                    label: {
                        normal: {
                            show: false,
                            position: 'inner'
                        }
                    },
                    legendHoverLink : false,
                    data:[
                        {value:40, name:'40%', itemStyle : labelFail},
                        {value:60, name:'60%', itemStyle : labelCom}
                    ]
                }
            ]
        };
        activeVisitors.setOption(optionSV);
        /*饼图——3*/
        var optionSV2 = {
            color:['#73ab3e', '#D2D1D1'],
            series: [
                {
                    name:'访问来源',
                    type:'pie',
                    selectedMode: 'single',
                    animation: false,
                    radius: [0, '60%'],
                    color: ['#6bbde8'],
                    label: {
                        normal: {
                            show: false,
                            position: 'inner'
                        }
                    },
                    legendHoverLink: false,
                    hoverAnimation: false,
                    data:[
                        {value:100, name:'90%'}
                    ]
                },
                {
                    name:'访问来源',
                    type:'pie',
                    radius: ['75%', '90%'],
                    label: {
                        normal: {
                            show: false,
                            position: 'inner'
                        }
                    },
                    legendHoverLink : false,
                    data:[
                        {value:10, name:'未完成', itemStyle : labelFail},
                        {value:90, name:'100%', itemStyle : labelCom}
                    ]
                }
            ]
        };
        activeVisitors2.setOption(optionSV2);
        var _resizeFontSize = function() {
            $.each($('*:not("html")'), function(i, n) {
                var fontSize = parseInt($(n).css("fontSize").replace("px", ""));
                if(fontSize < 12) {
                    $(n).css("fontSize", "12px");
                }
            });
        }
        _resizeFontSize();
        $(window).resize(function() {
            imageContainer.resize();
            staticticsImage.resize();
            activeVisitors.resize();
            activeVisitors2.resize();
            _resizeFontSize();
        });
    });
</script>
</body>
</html>